<template>
  <div class="teamBackView">

    <loading-view :data="teamList">
      <p class="countLabel">人数{{currentCount}}/{{totalCount}}人</p>

      <div v-for="(el, idx) in teamList">
        <div class="itemView" @click="openTeamClick(el.id)">
          <p class="nameLabel">{{el.enterpriseName}}</p>
          <div class="rightView">
            <p class="singleCountLabel">{{el.userCn}}/{{el.limitCn}}</p>
            <img class="iconView"
                 :src="isOpen(el.id) ? '/web-hft-ee/static/img/university/dropdown_icon_down.png' : '/web-hft-ee/static/img/university/dropdown_icon_up.png'"/>
          </div>
        </div>

        <div v-if="isOpen(el.id) && teamMemberInfo[el.id]">

          <div v-for="(el1, idx) in teamMemberInfo[el.id]">
            <team-cell :data="el1" @sendSettingClick="settingClick(el1, el)"></team-cell>
            <div style="height: 1px; background-color: #E4E8EC; margin-left: 72px"></div>
          </div>
        </div>

      </div>

    </loading-view>

    <van-action-sheet
      v-model="showSetting"
      :actions="actions"
      :z-index="2000"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
    />

    <move-member-cover v-if="roleType === 2 && settingUser" v-model="showMove" :user="settingUser"
                       :enterprise-name="settingUser.enterpriseName" @sendMoveSuccess="moveSuccess"></move-member-cover>

  </div>
</template>

<script>

  import TeamAPI from '@/repo/api/TeamAPI'
  import LoadingView from '@/components/LoadingView'
  import TeamCell from "./components/TeamCell"
  import UniversityTool from "../UniversityTool";
  import MoveMemberCover from "./components/MoveMemberCover";
  import Vue from 'vue';
  import {ActionSheet} from 'vant'
  import {universityTypes} from "../../../repo/store/university";

  Vue.use(ActionSheet);

  export default {
    name: "team-total",
    props: {
      org: {
        type: Object,
        default: null,
      }
    },
    data() {
      return {
        teamList: null,
        teamMemberInfo: {},
        openTeamList: [],

        showSetting: false,
        showMove: false,
        settingUser: null,
        actions: [],
      }
    },
    components: {
      MoveMemberCover,
      TeamCell,
      LoadingView
    },
    computed: {
      //是否是管理员 0为成员 1为普通管理员 2为超级管理员
      roleType() {
        return this.$store.getters.enterpriseRoleInfo.roleType
      },
      currentCount() {
        let current = 0
        if (!this.teamList) return 0
        this.teamList.forEach((e) => {
          current += e.userCn
        })
        return current
      },
      totalCount() {
        let total = 0
        if (!this.teamList) return 0
        this.teamList.forEach((e) => {
          total += e.limitCn
        })
        return total
      },

    },
    mounted() {
      this.getTeamList()
    },
    methods: {
      //判断当前团队是否展开
      isOpen(teamId) {
        return this.openTeamList.indexOf(teamId) !== -1
      },
      //展开收缩点击
      openTeamClick(teamId) {
        let index = this.openTeamList.indexOf(teamId)
        if (index !== -1) {
          this.openTeamList.splice(index, 1)
        } else {
          if (!this.teamMemberInfo[teamId]) {
            this.getMemberListByTeam(teamId)
          }
          this.openTeamList.push(teamId)
        }
      },
      //人员设置点击
      settingClick(user, team) {
        user.enterpriseName = team.enterpriseName
        this.actions = UniversityTool.getEditUserItems(user)
        this.settingUser = user
        this.showSetting = true
      },
      //sheet点击
      onSelect(item) {
        if (item.index === 0) {
          //打开或关闭管理员权限
          UniversityTool.modifyManagerPermission(this.settingUser).then(() => {
              this.getMemberListByTeam(this.settingUser.enterpriseId)
          })
        } else if (item.index === 1) {
          //任命管理员
          UniversityTool.setManager(this.settingUser).then(() => {
            this.getMemberListByTeam(this.settingUser.enterpriseId)
          })
        } else if (item.index === 2) {
          //更换企业
          this.showMove = true
        } else if (item.index === 3) {
          //移除员工
          UniversityTool.kickMember(this.settingUser).then(() => {
            this.getTeamList()
            this.getMemberListByTeam(this.settingUser.enterpriseId)
          })
        }
      },
      //移动成员成功
      moveSuccess() {
        this.getTeamList()
        for (let key in this.teamMemberInfo) {
          this.getMemberListByTeam(key)
        }

      },
      getMemberListByTeam(teamId) {
        UniversityTool.getTeamMemberList(teamId).then((memberList) => {
          this.teamMemberInfo[teamId] = memberList
          this.teamMemberInfo = Object.assign({}, this.teamMemberInfo)
        })
      },
      getTeamList() {
        TeamAPI.getTeamList().then((res) => {
          this.teamList = res.responseData.list
        })

      }
    }
  }
</script>

<style scoped>
  .teamBackView {
    min-height: calc(100vh - 49px);
    background-color: #F2F5F8;
    text-align: center;
  }

  .countLabel {
    font-size: 12px;
    color: #98999E;
    padding: 16px 0;
  }

  .itemView {
    background-color: white;
    padding: 12px 16px;
    border-top: #E4E8EC solid 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nameLabel {
    font-size: 14px;
    color: #323334;
  }

  .rightView {
    display: flex;
    align-items: center;
  }

  .singleCountLabel {
    font-size: 14px;
    color: #98999E;
  }

  .iconView {
    margin-left: 4px;
    width: 16px;
    height: 16px;
  }
</style>
